<script setup lang="ts">
const handle = (rowFile: any) => {
  console.log(rowFile);
};
</script>

<template>
  <div class="container">
    <div class="content-title">支持拖拽</div>
    <el-upload
      class="upload-demo"
      drag
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      multiple
      :on-change="handle"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <template #tip>
        <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
      </template>
    </el-upload>
    <div class="content-title">支持裁剪</div>
    <div class="plugins-tips">
      vue-cropper：一个简单的vue图片裁剪插件。 访问地址：
      <a href="https://github.com/xyxiao001/vue-cropper" target="_blank">vue-cropper</a>
      。 示例请查看
      <router-link to="/ucenter">个人中心-我的头像</router-link>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content-title {
  font-weight: 400;
  line-height: 50px;
  margin: 10px 0;
  font-size: 22px;
  color: #1f2f3d;
}

.upload-demo {
  width: 360px;
}
</style>
